<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="true"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <el-row :gutter="20" class="wrapElrow">
        <el-col class="elcol leftElcol" style="width: calc(100% - 400px)">
          <div class="titleInfo">
            <h3 class="subtitle">中市监处字【225号】</h3>
            <p>
              <span>来源：</span><span>工商</span>
              <span style="margin-left: 30px">处罚日期：</span
              ><span>2021年8月20日</span>
            </p>
          </div>
          <div class="info">
            <p class="title"><span>文书正文</span><span class="line"></span></p>
            <div class="infoBox">
              <el-row class="elrow" type="flex">
                <el-col :span="5" class="desc elcol">
                  <span>决定书文号</span>
                </el-col>
                <el-col :span="7" class="descValue elcol">
                  <span
                    >决定书文号决定书文号决定书文号决定书文号决定书文号决定书文号决定书文号决定书文号决定书文号决定书文号决定书文号决定书文号</span
                  >
                </el-col>
                <el-col :span="5" class="desc elcol">
                  <span>行政相对人</span>
                </el-col>
                <el-col :span="7" class="descValue elcol">
                  <span></span>
                </el-col>
              </el-row>
              <el-row class="elrow" type="flex">
                <el-col :span="5" class="desc elcol">
                  <span>处罚事由/违法行为类型</span>
                </el-col>
                <el-col :span="7" class="descValue elcol">
                  <span></span>
                </el-col>
                <el-col :span="5" class="desc elcol">
                  <span>处罚结果/内容</span>
                </el-col>
                <el-col :span="7" class="descValue elcol">
                  <span></span>
                </el-col>
              </el-row>
              <el-row class="elrow" type="flex">
                <el-col :span="5" class="desc elcol">
                  <span>处罚决定日期</span>
                </el-col>
                <el-col :span="7" class="descValue elcol">
                  <span></span>
                </el-col>
                <el-col :span="5" class="desc elcol">
                  <span>公示日期</span>
                </el-col>
                <el-col :span="7" class="descValue elcol">
                  <span></span>
                </el-col>
              </el-row>
              <el-row class="elrow" type="flex">
                <el-col :span="5" class="desc elcol">
                  <span>处罚机关</span>
                </el-col>
                <el-col :span="19" class="descValue elcol">
                  <span></span>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col class="elcol rightElcol" style="width: 400px">
          <div class="info">
            <p class="title">处罚信息</p>
            <p class="punishmentInfo">
              <span>决定书文号：</span>
              <span>中市监处字【225号】</span>
            </p>
            <p class="punishmentInfo">
              <span>处罚机关：</span>
              <span>中市监处字【225号】</span>
            </p>
            <p class="punishmentInfo">
              <span>执法地域：</span>
              <span>中市监处字【225号】</span>
            </p>
            <p class="punishmentInfo">
              <span>处罚类型：</span>
              <span>中市监处字【225号】</span>
            </p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'punishmentDetail',
  data() {
    return {
      titleText: '处罚详情',
      infoDetail: {},
      progressDetail: [],
    }
  },
  async mounted() {
    // const { id } = this.$route.query;
    // await this.getInfoDetail(id);
  },
  methods: {
    // 信息详情
    getInfoDetail(id) {
      return this.axios({
        method: 'post',
        url: 'api-c/complaint/base/detail',
        data: {
          id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.infoDetail = response.data.result
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    //返回
    goBack() {
      this.$router.push({
        path: '/home/enterpriseArchives/enterpriseData',
        name: 'enterpriseData',
        query: {
          activeName: 'second',
        },
      })
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/enterpriseArchives/enterpriseList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  .mainCon {
    height: calc(100% - 67px);
    overflow-y: auto;
    padding: 24px;
    background: #f5f7fa;
    .wrapElrow {
      height: 100%;
      .leftElcol {
        height: 100%;
        .titleInfo {
          padding: 24px;
          padding-bottom: 0;
          background-color: #fff;
          h3 {
            font-size: 26px;
            font-weight: 500;
          }
          p {
            margin-top: 16px;
          }
        }
      }
    }
    .info {
      padding: 30px 24px;
      background: #fff;
      .title {
        font: bold 18px Microsoft YaHei;
        color: #333333;
        border-left: 4px solid #009588;
        padding-left: 20px;
        margin-bottom: 20px;
        .line {
          float: right;
          width: calc(100% - 82px);
          border-bottom: 1px solid #777;
          position: relative;
          top: 12px;
        }
      }
      .infoBox {
        padding: 20px 0;
        .elrow {
          .elcol {
            display: table;
            padding: 12px;
            text-align: center;
            border-top: 1px solid #777;
            border-left: 1px solid #777;
            &:last-child {
              border-right: 1px solid #777;
            }
            span {
              display: table-cell;
              vertical-align: middle;
              line-height: 20px;
            }
          }
          .desc {
            background-color: #f1f9fd;
          }
          &:last-child {
            border-bottom: 1px solid #777;
          }
        }
      }
      .punishmentInfo {
        margin-top: 12px;
        line-height: 30px;
      }
    }
  }
}
</style>
